<template>
  <div>
    <el-dialog v-model="dialogFormVisible" :title="title" width="500" destroy-on-close :close-on-click-modal="closeOnClickModal">
      <el-form ref="formRef" :model="form" :rules="rules">
        <el-form-item label="分类名称" prop="categoryName" :label-width="formLabelWidth">
          <el-input v-model="form.categoryName" autocomplete="off" placeholder="请输入分类名称" clearable />
        </el-form-item>
        <el-form-item label="父级" prop="pid" :label-width="formLabelWidth">
          <el-tree-select
            v-model="form.pid"
            :data="treeSelect"
            check-strictly
            :render-after-expand="false"
            :props="{ label: 'categoryName', children: 'children', value: 'id'}"
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item label="分类图标(180*180)" prop="iconUrl" :label-width="formLabelWidth">
          <div class="icon-category" @click="openUpload">
            <el-icon v-if="!form.iconUrl" size="30"><Camera /></el-icon>
            <el-image 
                v-else
                style="width: 50px;height: 50px;"
                :src="form.iconUrl" 
                fit="cover"/>
          </div>
        </el-form-item>
        <el-form-item label="排序" prop="sort" :label-width="formLabelWidth">
          <el-input-number v-model="form.sort" :min="0" placeholder="请输入排序"/>
        </el-form-item>
        <el-form-item label="状态" prop="isShow" :label-width="formLabelWidth">
          <el-switch v-model="isShow" inline-prompt active-text="显示" inactive-text="隐藏" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSaveOrUpdate">
            确认
          </el-button>
        </div>
      </template>

      <common-upload ref="commonUploadRef" @selectImgUrl="setImgUrl"></common-upload>
    </el-dialog>
  </div>
</template>

<script setup>
  import { reactive, ref } from 'vue'
  import { tableList, saveOrUpdate, getInfo } from '~/api/product/category'
  import CommonUpload from '~/components/upload/upload.vue'

  const dialogFormVisible = ref(false)
  const formLabelWidth = '150px'
  const title = ref('新建商品分类')
  const closeOnClickModal = ref(false)
  const formRef = ref(null)
  const treeSelect = ref([])
  const isShow = ref(true)
  const commonUploadRef = ref(null)

  const emit = defineEmits(['refreshDataList'])

  const form = reactive({
    id: 0,
    pid: '',
    categoryName: '',
    iconUrl: '',
    isShow: 1,
    sort: 0
  })

  const rules = {
    categoryName: [
      { required: true, message: '商品分类名称不能为空!', trigger: 'blur' }
    ]
  }

  // 初始化数据
  function init(type, id) {
    dialogFormVisible.value = true
    // 查询所有菜单
    loadMenu()
    if(type === 'add') {
      // 新建
      title.value = '新建商品分类'
      form.id = 0
      form.pid = ''
      form.categoryName = ''
      form.iconUrl = ''
      form.isShow = 1
      form.sort = 0
      isShow.value = true
    } else if(type === 'add_children') {
      // 新建
      title.value = '新建商品分类'
      form.id = 0
      form.pid = id
      form.categoryName = ''
      form.iconUrl = ''
      form.isShow = 1
      form.sort = 0
      isShow.value = true
    } else {
      // 修改
      title.value = '修改商品分类'
      form.sort = 0
      // 通过id查询用户信息
      queryPermissionInfo(id)
    }
  }
  // 通过id查询菜单信息
  function queryPermissionInfo(id) {
    getInfo(id).then(res => {
      if(res && res.data.code === 200) {
        const data = res.data.data
        form.id = data.id
        form.pid = data.pid
        form.categoryName = data.categoryName
        form.iconUrl = data.iconUrl
        form.isShow = data.isShow
        if(data.isShow === 0) {
          isShow.value = false
        } else {
          isShow.value = true
        }
        form.sort = data.sort
      }
    })
  }
  function loadMenu() {
    tableList().then(res => {
      if(res && res.data.code === 200) {
        treeSelect.value = res.data.data
      }
    })
  }
  // 确认
  function handleSaveOrUpdate() {
    formRef.value.validate((valid) => {
      if(!valid) {
        return false
      }
      if(isShow.value) {
        form.isShow = 1
      } else {
        form.isShow = 0
      }
      saveOrUpdate(form).then(res => {
        if(res && res.data.code === 200) {
          dialogFormVisible.value = false
          emit('refreshDataList')
        }
      })
    })
  }
  // 打开上传组件
  function openUpload() {
    if(commonUploadRef.value) {
      commonUploadRef.value.init(false)
    }
  }

  // 选中的图片放入表单中
  function setImgUrl(selectImg) {
    form.iconUrl = selectImg.url
  }

  // 将方法暴露给父组件
  defineExpose({
    init
  })
</script>

<style>
  .icon-category {
    width: 50px;
    height: 50px;
    border: 1px solid #898484;
    border-style: dashed;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
</style>
